<template>
  <div>
    <van-nav-bar
  title="联系客服"
  left-arrow
  @click-left="onClickLeft"
/>
<van-nav-bar title="标题" left-text="返回" >
  <template #right>
    <van-icon name="arrow" size="30" />
  </template>
  <template #left>
      <van-icon name="friends-o" size="30" />
  </template>
  <template #title>
    <div style="margin-left: 0px;">
        <p style="text-align: left;">售前咨询，获取更多优惠</p>
        <p style="font-size: 12px; color: gray; text-align: left;">咨询时间:9:00-24:00</p>
    </div>
  </template>
</van-nav-bar>
<van-nav-bar title="标题" left-text="返回" >
  <template #right>
    <van-icon name="arrow" size="30" />
  </template>
  <template #left>
      <van-icon name="friends-o" size="30"/>
  </template>
  <template #title>
    <div>
        <p style="text-align: left;">官网咨询技术&emsp;&emsp;&emsp;&emsp;&emsp; </p>
        <p style="font-size: 12px; color: gray; text-align: left;">咨询时间:9:00-24:00</p>
    </div>
  </template>
</van-nav-bar>



<van-nav-bar title="标题" left-text="返回" >
  <template #right>
    <van-icon name="arrow" size="30" />
  </template>
  <template #left>
      <van-icon name="friends-o"  size="30"/>
  </template>
  <template #title>
    <div>
        <p style="text-align: left;">华硕小二，享全方位服务</p>
        <p style="font-size: 12px; color: gray; text-align: left;" >咨询时间:9:00-24:00</p>
    </div>
  </template>
</van-nav-bar>
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar } from 'vant';

Vue.use(NavBar);
export default {
methods:{
    onClickLeft(){
        // console.log(1);
        this.$router.push('/homepage').catch(err=>{})
    }
}
}
</script>

<style scoped>
html,body{
    background-color: white;
}
/deep/ .van-nav-bar__title{
    max-width: 70% !important;
    width: 70%;
}
/deep/ .van-nav-bar__content{
    margin-top: 20px !important;
}
</style>